<!-- 能源结构分析 -->

<template>
  <div class="flex flex-col w-100% p-10px box-border" style="height: calc(100% - 40px)">
    <!-- card-1 -->
    <div class="flex-1 flex mb-10px">
      <div
        class="flex-1 mr-10px flex flex-col"
        style="box-shadow: 0px 1px 10px 0px rgba(153, 153, 153, 0.4)"
      >
        <div class="flex justify-between items-center h-50px pl-10px pr-20px bg-[#F8F8F8]">
          <span class="text-[#333] text-16px font-bold">能耗类型结构分析</span>
          <div class="flex items-center">
            <span class="mr-10px text-[#333] text-14px">选择时间</span>
            <el-date-picker
              v-model="nhlxjgfxDate"
              type="daterange"
              range-separator="至"
              unlink-panels
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              @change="dateChangeFormat(nhlxjgfxDate)"
            />
            <el-button
              type="primary"
              class="w-80px ml-50px rounded-15px"
              :icon="Search"
              @click="loadNhlxjgfxEchat"
              >查询</el-button
            >
            <el-button
              class="w-80px bg-[#dceeff] rounded-15px"
              :icon="Refresh"
              @click="resetNhlxjgfxEchat"
              >重置</el-button
            >
          </div>
        </div>
        <div class="w-100% flex-1">
          <Echarts ref="nhlxjgfxEchats"></Echarts>
        </div>
      </div>
      <div
        class="flex-1 flex flex-col"
        style="box-shadow: 0px 1px 10px 0px rgba(153, 153, 153, 0.4)"
      >
        <div class="flex justify-between items-center h-50px pl-10px pr-20px bg-[#F8F8F8]">
          <span class="text-[#333] text-16px font-bold">各企业能耗占比分析</span>
          <div class="flex items-center">
            <span class="mr-10px text-[#333] text-14px">选择时间</span>
            <el-date-picker
              v-model="nhzbfxDate"
              type="daterange"
              range-separator="至"
              unlink-panels
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              @change="dateChangeFormat(nhzbfxDate)"
            />
            <el-button
              type="primary"
              class="w-80px ml-50px rounded-15px"
              :icon="Search"
              @click="loadNnzbfxEchat"
              >查询</el-button
            >
            <el-button
              class="w-80px bg-[#dceeff] rounded-15px"
              :icon="Refresh"
              @click="resetNnzbfxEchat"
              >重置</el-button
            >
          </div>
        </div>
        <div class="w-100% flex-1">
          <Echarts ref="nhzbfxEchats"></Echarts>
        </div>
      </div>
    </div>

    <!-- card-2 -->
    <div
      class="flex-1 flex flex-col mb-10px"
      style="box-shadow: 0px 1px 10px 0px rgba(153, 153, 153, 0.4)"
    >
      <div class="flex justify-between items-center h-50px pl-10px pr-40px bg-[#F8F8F8]">
        <span class="text-[#333] text-16px font-bold">清洁能源占比分析</span>

        <div class="flex items-center">
          <span class="mr-11px text-[#333] text-14px">选择时间</span>
          <el-date-picker
            v-model="qjnyzbfxDate"
            type="daterange"
            range-separator="至"
            unlink-panels
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            @change="dateChangeFormat(qjnyzbfxDate)"
          />
          <el-button type="primary" class="w-80px ml-50px rounded-15px" :icon="Search"
            >查询</el-button
          >
          <el-button
            class="w-80px bg-[#dceeff] rounded-15px"
            :icon="Refresh"
            @click="resetQjnyzbfxEchat"
            >重置</el-button
          >
        </div>
      </div>
      <div class="w-100% flex-1 flex">
        <div class="w-30%">
          <Echarts ref="qjnyzbEchats1"></Echarts>
        </div>
        <div class="flex-1">
          <Echarts ref="qjnyzbEchats2"></Echarts>
        </div>
      </div>
    </div>

    <!-- card-3 -->
    <div class="flex-1 flex flex-col" style="box-shadow: 0px 1px 10px 0px rgba(153, 153, 153, 0.4)">
      <div class="flex justify-between items-center h-50px pl-10px pr-40px bg-[#F8F8F8]">
        <span class="text-[#333] text-16px font-bold">一/二次能源结构分析</span>

        <div class="flex items-center">
          <span class="mr-11px text-[#333] text-14px">选择时间</span>
          <el-date-picker
            v-model="yecnyjgfxDate"
            type="daterange"
            range-separator="至"
            unlink-panels
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            @change="dateChangeFormat(yecnyjgfxDate)"
          />
          <el-button
            type="primary"
            class="w-80px ml-50px rounded-15px"
            :icon="Search"
            @click="loadYecnyjgfxEchat"
            >查询</el-button
          >
          <el-button
            class="w-80px bg-[#dceeff] rounded-15px"
            :icon="Refresh"
            @click="resetYecnyjgfxEchat"
            >重置</el-button
          >
        </div>
      </div>
      <div class="w-100% flex-1 flex">
        <div class="w-30%">
          <Echarts ref="yecnyjgfxEchats1"></Echarts>
        </div>
        <div class="flex-1">
          <Echarts ref="yecnyjgfxEchats2"></Echarts>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import moment from 'moment'
import { Search, Refresh } from '@element-plus/icons-vue'
import { dateChangeFormat } from '@/utils/date'

/** 能耗类型结构分析 start */
const nhlxjgfxEchats = ref(null) as any
const nhlxjgfxDate = ref([
  moment().startOf('month').format('YYYY-MM-DD HH:mm:ss'),
  moment().format('YYYY-MM-DD HH:mm:ss'),
])

const card1Option1 = {
  tooltip: {
    trigger: 'item',
    formatter: '{b}: {d}%',
    axisPointer: {
      animation: false,
    },
    backgroundColor: 'rgba(16,16,52,0.6)',
    textStyle: {
      color: 'white',
    },
  },
  legend: {
    orient: 'vertical',
    right: '10%', // 距离右边的距离
    formatter: function (name: any) {
      const data = card1Option1.series[0].data
      let total = 0
      for (let i = 0; i < data.length; i++) {
        total += data[i].value
      }
      for (let i = 0; i < data.length; i++) {
        if (data[i].name === name) {
          return name + ' (' + ((data[i].value / total) * 100).toFixed(2) + '%)'
        }
      }
    },
  },
  series: [
    {
      type: 'pie',
      center: ['45%', '42%'],
      radius: '80%',
      label: {
        formatter: '{b}: {d}%',
      },
      data: [],
    },
  ],
}

onMounted(() => {
  nhlxjgfxEchats.value.initEchat(card1Option1)
})
function loadNhlxjgfxEchat() {
  queryNylxYlzbTjxx({ kssj: nhlxjgfxDate.value[0], jssj: nhlxjgfxDate.value[1] }).then(
    (res: any) => {
      card1Option1.series[0].data = []

      const obj = {
        sw: {
          name: '用水占比',
          color: '#73c0de',
        },
        dw: {
          name: '用电占比',
          color: '#fac858',
        },
        zq: {
          name: '蒸汽占比',
          color: '#91cc75',
        },
        rq: {
          name: '燃气占比',
          color: '#5470c6',
        },
        mt: {
          name: '用煤占比',
          color: '#ee6666',
        },
      }
      const seriesData =
        res &&
        res.map((item: any) => {
          return {
            value: item.zb,
            name: obj[item.bm].name,
            itemStyle: {
              color: obj[item.bm].color,
            },
          }
        })

      if (seriesData) {
        card1Option1.series[0].data = seriesData
      }

      nhlxjgfxEchats.value.initEchat(card1Option1)
    }
  )
}
loadNhlxjgfxEchat()

const resetNhlxjgfxEchat = () => {
  nhlxjgfxDate.value[0] = moment().startOf('month').format('YYYY-MM-DD HH:mm:ss')
  nhlxjgfxDate.value[1] = moment().format('YYYY-MM-DD HH:mm:ss')

  loadNhlxjgfxEchat()
}
/** 能耗类型结构分析 end */

/** 各企业能耗占比分析 start */
const nhzbfxEchats = ref(null) as any
const nhzbfxDate = ref([
  moment().startOf('month').format('YYYY-MM-DD HH:mm:ss'),
  moment().format('YYYY-MM-DD HH:mm:ss'),
])

const card1Option2 = {
  tooltip: {
    trigger: 'item',
    formatter: '{b}: {d}%',
    axisPointer: {
      animation: false,
    },
    backgroundColor: 'rgba(16,16,52,0.6)',
    textStyle: {
      color: 'white',
    },
  },
  legend: {
    orient: 'vertical',
    right: '5%', // 距离右边的距离
    formatter: function (name: any) {
      const data = card1Option2.series[0].data
      let total = 0
      for (let i = 0; i < data.length; i++) {
        total += data[i].value
      }
      for (let i = 0; i < data.length; i++) {
        if (data[i].name === name) {
          return name + ' (' + ((data[i].value / total) * 100).toFixed(2) + '%)'
        }
      }
    },
  },
  series: [
    {
      type: 'pie',
      center: ['30%', '42%'],
      radius: '80%',
      label: {
        formatter: '{b}: {d}%',
      },
      data: [
        // { value: 8.3, name: '盛I炼化', itemStyle: { color: '#5470C6' } },
        // { value: 8.3, name: '斯尔邦石化', itemStyle: { color: '#91CC75' } },
        // { value: 8.3, name: '连云港石化', itemStyle: { color: '#FAC858' } },
        // { value: 8.3, name: '瑞恒', itemStyle: { color: '#EE6666' } },
        // { value: 8.3, name: '辰特种新材料', itemStyle: { color: '#73C0DE' } },
        // { value: 8.3, name: '瑞兆科', itemStyle: { color: '#3BA272' } },
        // { value: 8.3, name: '嘉宏', itemStyle: { color: '#EA7CCC' } },
        // { value: 8.3, name: '思派', itemStyle: { color: '#0030C5' } },
        // { value: 8.3, name: '赛科', itemStyle: { color: '#9A60B4' } },
        // { value: 8.3, name: '圣奥', itemStyle: { color: '#FC8452' } },
        // { value: 8.3, name: '洋热电', itemStyle: { color: '#FFE013' } },
        // { value: 8.3, name: '工程岛', itemStyle: { color: '#0AF2EF' } },
      ],
    },
  ],
}

onMounted(() => {
  nhzbfxEchats.value.initEchat(card1Option2)
})
function loadNnzbfxEchat() {
  queryQynhzbTjxx({ kssj: nhzbfxDate.value[0], jssj: nhzbfxDate.value[1] }).then((res: any) => {
    card1Option2.series[0].data = []

    const seriesData =
      res &&
      res.map((item: any) => {
        return {
          value: item.zb,
          name: item.qymc,
        }
      })
    //根据占比百分比排序(大的排前面)
    seriesData && seriesData.sort((a: any, b: any) => b.value - a.value)

    // for (let i = 0; i < 10; i++) {
    //   seriesData.push({
    //     value: 10,
    //     name: '连云港虹洋热电有限公司' + i,
    //   })
    // }

    //超出固定企业个数
    const qyCount = 9
    if (seriesData.length > qyCount) {
      let sumZb = 0 //其他企业的占比
      seriesData.map((item: any, index: any) => {
        if (index > qyCount - 1) {
          sumZb += item.value
        }
      })
      seriesData.splice(qyCount)
      seriesData.push({ name: '其他企业', value: sumZb })
    }

    if (seriesData) {
      card1Option2.series[0].data = seriesData
    }

    nhzbfxEchats.value.initEchat(card1Option2)
  })
}
loadNnzbfxEchat()

const resetNnzbfxEchat = () => {
  nhzbfxDate.value[0] = moment().startOf('month').format('YYYY-MM-DD HH:mm:ss')
  nhzbfxDate.value[1] = moment().format('YYYY-MM-DD HH:mm:ss')

  loadNnzbfxEchat()
}
/** 各企业能耗占比分析 end */

/** 清洁能源占比分析 start */
const qjnyzbfxDate = ref([
  moment().startOf('month').format('YYYY-MM-DD HH:mm:ss'),
  moment().format('YYYY-MM-DD HH:mm:ss'),
])

const qjnyzbEchats1 = ref(null) as any
const card2Option1 = {
  tooltip: {
    trigger: 'item',
    formatter: '{b}: {d}%',
    axisPointer: {
      animation: false,
    },
    backgroundColor: 'rgba(16,16,52,0.6)',
    textStyle: {
      color: 'white',
    },
  },
  legend: {
    bottom: 'bottom',
    formatter: function (name: any) {
      const data = card2Option1.series[0].data
      let total = 0
      for (let i = 0; i < data.length; i++) {
        total += data[i].value
      }
      for (let i = 0; i < data.length; i++) {
        if (data[i].name === name) {
          return name + ' (' + ((data[i].value / total) * 100).toFixed(2) + '%)'
        }
      }
    },
  },
  series: [
    {
      type: 'pie',
      center: ['45%', '40%'],
      radius: '80%',
      label: {
        formatter: '{b}: {d}%',
      },
      data: [
        { value: 26.9, name: '清洁能源', itemStyle: { color: '#3ecece' } },
        { value: 73.1, name: '非清洁能源', itemStyle: { color: '#f6b258' } },
      ],
    },
  ],
}
onMounted(() => {
  qjnyzbEchats1.value.initEchat(card2Option1)
})

const qjnyzbEchats2 = ref(null) as any
const card2Option2 = {
  title: {
    text: '能耗量/万tce',
    left: 'center',
    textStyle: {
      fontWeight: 'normal',
    },
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      animation: false,
    },
    backgroundColor: 'rgba(16,16,52,0.6)',
    textStyle: {
      color: 'white',
    },
  },
  legend: {
    data: ['清洁能源用量', '非清洁能源用量'],
    left: 'left',
  },
  grid: {
    left: 40,
    right: 40,
    bottom: 20,
  },
  xAxis: [
    {
      type: 'category',
      data: [
        '01-10',
        '01-11',
        '01-12',
        '01-13',
        '01-14',
        '01-15',
        '01-16',
        '01-17',
        '01-18',
        '01-19',
        '01-20',
        '01-21',
        '01-22',
        '01-23',
        '01-24',
      ],
    },
  ],
  yAxis: [
    {
      type: 'value',
    },
  ],
  series: [
    {
      name: '清洁能源用量',
      type: 'bar',
      stack: 'Ad',
      data: [410, 410, 410, 410, 410, 410, 410, 410, 410, 410, 410, 410, 410, 410, 410],
      barWidth: '16',
      itemStyle: {
        normal: {
          color: '#3ecece',
        },
      },
    },
    {
      name: '非清洁能源用量',
      type: 'bar',
      stack: 'Ad',
      data: [410, 410, 410, 410, 410, 410, 410, 410, 410, 410, 410, 410, 410, 410, 410],
      barWidth: '16',
      itemStyle: {
        normal: {
          color: '#f6b258',
        },
      },
    },
  ],
}
onMounted(() => {
  qjnyzbEchats2.value.initEchat(card2Option2)
})

const resetQjnyzbfxEchat = () => {
  qjnyzbfxDate.value[0] = moment().startOf('month').format('YYYY-MM-DD HH:mm:ss')
  qjnyzbfxDate.value[1] = moment().format('YYYY-MM-DD HH:mm:ss')
}
/** 清洁能源占比分析 end */

/** 一/二次能源结构分析 start */
const yecnyjgfxEchats1 = ref(null) as any
const yecnyjgfxEchats2 = ref(null) as any
const yecnyjgfxDate = ref([
  moment().startOf('month').format('YYYY-MM-DD HH:mm:ss'),
  moment().format('YYYY-MM-DD HH:mm:ss'),
])

const card3Option1: any = {
  tooltip: {
    trigger: 'item',
    formatter: '{b}: {d}%',
    axisPointer: {
      animation: false,
    },
    backgroundColor: 'rgba(16,16,52,0.6)',
    textStyle: {
      color: 'white',
    },
  },
  legend: {
    bottom: 'bottom',
    formatter: function (name: any) {
      const data = card3Option1.series[0].data
      let total = 0
      for (let i = 0; i < data.length; i++) {
        total += data[i].value
      }
      for (let i = 0; i < data.length; i++) {
        if (data[i].name === name) {
          return name + ' (' + ((data[i].value / total) * 100).toFixed(2) + '%)'
        }
      }
    },
  },
  series: [
    {
      type: 'pie',
      center: ['45%', '42%'],
      radius: '80%',
      label: {
        formatter: '{b}: {d}%',
      },
      data: [],
    },
  ],
}
const card3Option2 = {
  title: {
    text: '能耗量/万tce',
    left: 'center',
    textStyle: {
      fontWeight: 'normal',
    },
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      animation: false,
    },
    backgroundColor: 'rgba(16,16,52,0.6)',
    textStyle: {
      color: 'white',
    },
  },
  legend: {
    left: 'left',
  },
  grid: {
    left: 40,
    right: 40,
    bottom: 20,
  },
  xAxis: [
    {
      type: 'category',
      data: [],
    },
  ],
  yAxis: [
    {
      type: 'value',
    },
  ],
  series: [],
}

onMounted(() => {
  yecnyjgfxEchats1.value.initEchat(card3Option1)

  card3Option2.graphic = [
    {
      type: 'text',
      left: 'center',
      top: 'middle',
      style: {
        fill: '#999',
        text: '暂无数据',
        font: '14px Microsoft YaHei',
      },
    },
  ]
  yecnyjgfxEchats2.value.initEchat(card3Option2)
})

function loadYecnyjgfxEchat() {
  queryYecNyylTjxx({ kssj: yecnyjgfxDate.value[0], jssj: yecnyjgfxDate.value[1] }).then(
    (res: any) => {
      //饼图
      card3Option1.series[0].data = []
      const arr =
        res &&
        res.nyYlzList &&
        res.nyYlzList.map((item: any) => {
          const obj = {
            name: item.ylm,
            itemStyle: { color: item.ylm === '一次能源用量' ? '#81d3f8' : '#01a7f0' },
            value: item.ylz.reduce((prev: any, cur: any) => {
              return prev + cur
            }, 0),
          }
          return obj
        })
      if (arr) {
        card3Option1.series[0].data = arr
      }
      yecnyjgfxEchats1.value.initEchat(card3Option1)

      //柱状图
      card3Option2.xAxis[0].data = []
      card3Option2.series = []

      const xAxisData = res && res.sjList
      const series =
        res &&
        res.nyYlzList &&
        res.nyYlzList.map((ny: any) => {
          return {
            name: ny.ylm,
            type: 'bar',
            stack: 'Ad',
            barWidth: '16',
            data: ny.ylz,
            itemStyle: {
              normal: {
                color: ny.ylm === '一次能源用量' ? '#81d3f8' : '#01a7f0',
              },
            },
          }
        })
      if (xAxisData && series) {
        card3Option2.graphic = null
        card3Option2.xAxis[0].data = xAxisData
        card3Option2.series = series
      } else {
        card3Option2.graphic = [
          {
            type: 'text',
            left: 'center',
            top: 'middle',
            style: {
              fill: '#999',
              text: '暂无数据',
              font: '14px Microsoft YaHei',
            },
          },
        ]
      }
      yecnyjgfxEchats2.value.initEchat(card3Option2)
    }
  )
}
loadYecnyjgfxEchat()

const resetYecnyjgfxEchat = () => {
  yecnyjgfxDate.value[0] = moment().startOf('month').format('YYYY-MM-DD HH:mm:ss')
  yecnyjgfxDate.value[1] = moment().format('YYYY-MM-DD HH:mm:ss')

  loadYecnyjgfxEchat()
}
/** 一/二次能源结构分析 end */
</script>

<style></style>
